<template>
    <el-card>
        <div slot="header" class="header">
            <div class="category-header">
                <span>销售额类别占比</span>
                <el-radio-group v-model="value">
                    <el-radio-button label="全部渠道"></el-radio-button>
                    <el-radio-button label="线上"></el-radio-button>
                    <el-radio-button label="门店"></el-radio-button>
                </el-radio-group>
            </div>
        </div>

        <div>
            <div class="charts" ref="charts"></div>
        </div>
    </el-card>
</template>

<script>
    import echarts from 'echarts'
    export default {
        data() {
            return {
                value: '全部渠道',
            }
        },

        mounted() {
            let myecharts = echarts.init(this.$refs.charts);
            myecharts.setOption({
                // 将选中的文字放到中间位置
                title: {
                    text: '视频',
                    subtext: 1048,
                    left: 'center',
                    top: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            position: 'outsize'
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            { value: 1048, name: '视频' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ]
                    }
                ]
            });

            // 绑定事件
            myecharts.on('mouseover',(params) => {
                const {name,value} = params;
                myecharts.setOption({
                    title: {
                        text: name,
                        subtext: value
                    }
                })
            })
        },
        name: "index"
    }
</script>

<style scoped>
    .category-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header {
        border-bottom: 1px solid #eee;
    }
    .charts {
        width: 100%;
        height: 255px;
    }
</style>
